<template>
  <div id="app">
    <transition>
      <div :class="{ guide: true, elder: elder }" v-if="guideShow">
        <img src="./assets/images/guide.jpg" />
        <div class="time">
          <div class="guidTime">
            {{ guidTime }}
          </div>
          <div class="guidBtn" @click="hideGuid">跳过</div>
        </div>
      </div>
    </transition>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import authMixin from "@/mixins/authMixin";
export default {
  name: "App",
  mixins: [authMixin],
  data() {
    return {
      guideShow: true,
      guidTime: 5,
      elder: false,
    };
  },
  created() {
    
  },
  mounted() {
    this.gideTime();
    ZWJSBridge.onReady(() => {
      ZWJSBridge.getUiStyle()
        .then((result) => {
          console.log('uistyle-succ',result);
          if(result.uiStyle === 'normal'){
            this.elder = false;
            this.$router.replace("/Home");
          }else if(result.uiStyle === 'elder'){
            this.elder = true;
            this.$router.replace("/eldHome");
          }
        })
        .catch((error) => {
          console.log('uistyle-err',result);
        });
    });
  },
  methods: {
    gideTime() {
      this.timer = setInterval(() => {
        if (this.guidTime === 1) {
          this.guideShow = false;
          clearInterval(this.timer);
        }
        this.guidTime--;
      }, 1000);
    },
    hideGuid() {
      clearInterval(this.timer);
      this.guideShow = false;
    },
  },
};
</script>
<style>
html {
  overflow-x: hidden;
}
* {
  padding: 0;
  margin: 0;
}
img {
  vertical-align: middle;
}
audio {
  opacity: 0;
  z-index: -1;
  position: relative;
}
.guide {
  position: fixed;
  z-index: 5000;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.guide img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.guide .time {
  background-color: rgba(0, 0, 0, 0.45);
  width: 1.7rem;
  height: 0.7rem;
  border-radius: 0.7rem;
  position: fixed;
  right: 0.2rem;
  top: 0.35rem;
  z-index: 5002;
  color: #fff;
  font-size: 0.3rem;
  display: flex;
  justify-content: center;
}
.guidTime {
  margin-right: 0.2rem;
  height: 100%;
  text-align: center;
  line-height: 0.7rem;
  font-size: 0.36rem;
}
.guidBtn {
  height: 100%;
  text-align: center;
  line-height: 0.7rem;
  font-size: 0.33rem;
}
.guide.elder .time {
  width: 2rem;
  height: 0.9rem;
  border-radius: 0.9rem;
  font-size: 0.43rem;
}
.guide.elder .guidTime {
  line-height: 0.9rem;
  font-size: 0.43rem;
}
.guide.elder .guidBtn {
  line-height: 0.9rem;
  font-size: 0.43rem;
}
.amap-copyright {
  display: none !important;
}
.amap-logo {
  display: none !important;
}
.amap-copyright {
  opacity: 0;
}
/* 自定义tab */
.bottomRar .van-tabs__line {
  display: none;
}
.bottomRar .van-tabs__wrap--scrollable .van-tab {
  padding: 0 0.11rem;
}

.van-tabs--line .van-tabs__wrap {
  height: 1rem !important;
}
.van-popup {
  overflow-y: hidden !important;
}
iframe {
  border: none;
  outline: none;
}
.van-empty__description {
  padding: 0 0 !important;
  margin-top: 0.22rem !important;
}
.van-dialog__confirm {
  color: #1492ff !important;
}
.van-dialog__message {
  font-size: 0.4rem !important;
}
</style>
